<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="format-detection" content="telephone=no,email=no"/>
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>商品详情</title> 
<link rel="icon" href="">
<!--<link href="${base!}/assets/front/newH5/css/jquery.hiSlider.min.css" type="text/css" rel="stylesheet" />-->
    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="${base!}/assets/front/newH5/css/common-m.css">
<link rel="stylesheet" type="text/css" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}">
</head>
<!-- 给body加一个空的touchstart事件即可让:active效果在移动端生效 -->
<body ontouchstart="">
    <section class="center" id="product">
    <a href="javascript:history.go(-1)" class="return"><img src="${base!}/assets/front/newH5/images/arrowRight.png" alt="" /></a>
    <!--<section class="banner"  id="wrap">-->
        <!--<ul  class="hiSlider hiSlider1" >-->

            <!--&lt;!&ndash;<li class="hiSlider-item" ><a href="javascript:void(0);"><img  style="width: 415px;height: 300px;":src="item.imgAlbum" alt="" /></a></li>&ndash;&gt;-->
            <!--<li class="hiSlider-item" v-for="item in product.imageList" :key="item.id"><a href="javascript:void(0);"><img style="width: 415px;height: 300px;" :src="item.imgAlbum"alt="" /></a></li>-->
            <!--&lt;!&ndash;<li class="hiSlider-item"><a href="javascript:void(0);"><img src="${base!}/assets/front/newH5/images/banner.png" alt="" /></a></li>&ndash;&gt;-->
            <!--<li class="hiSlider-item item-clone" style="width: 415px; height: 300px; float: left;"><a href="javascript:void(0);"><img src="${base!}/assets/front/newH5/images/banner.png" alt=""></a></li>-->
        <!--</ul>-->

        <div id="slider" class="mui-slider" >
            <div class="mui-slider-group mui-slider-loop" >
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img :src="banner" style="height: 250px;">
                    </a>
                </div>

                <!-- 第二张 -->
                <div class="mui-slider-item" v-for="item in product.imageList" :key="item.id">
                    <a href="#">
                        <img :src="item.imgAlbum" style="height: 250px;">
                    </a>
                </div>

                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img :src="banner" style="height: 250px;">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator"  v-for="item in product.imageList"></div>
            </div>
        </div>
    <!--</section>-->
    <section class="detailsMessage bgGray">
        <p>{{product.name}}</p>
        <input type="hidden" id="stock" :value="product.stock">
        <h1>现价：<i>￥</i><span>{{product.price}}</span><em>厂商指导价：<del>￥{{product.marketPrice}}</del></em></h1>
        <h2>数量：
            <b>
                <button class="reduce nofocus" onclick="reducePro()">-</button>
                <span id="productNum">1</span>
                <button class="add" onclick="addPro()">+</button>
            </b>
        </h2>
    </section>
    <section class="detailsImg">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell" v-on:click="look">
                <a class="mui-navigate-right" >
                    宝贝评价({{feedCount}})<span style="float:right;padding-right: 35px;color: #38cecd;">查看全部</span>
                </a>
            </li>
        </ul>
        <h3>商品详情</h3>
        <div v-html="product.wapNote">
        {{product.wapNote}}
        </div>
    </section>
    <footer class="detailsFooter">
        <ul class="clear">
            <li>
                <a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" >
                    <img src="${base!}/assets/front/newH5/images/icon2.png" alt=""  />
                    <span>
                        购物车
                        <i id="cartNum">0</i>
                    </span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="fastBuy()">
                    立即购买
                </a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="addCart();">
                    加入购物车
                </a>
            </li>
        </ul>
    </footer>
</section>
<script type="text/javascript" src="${base!}/assets/front/newH5/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="${base!}/assets/front/newH5/js/jquery.hiSlider.min.js"></script>
<script type="text/javascript" src="${base!}/assets/front/newH5/js/common.js"></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
    <script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
    <script type="text/javascript" charset="utf-8">

        mui.init({
            swipeBack:true //启用右滑关闭功能
        });

        var vue = new Vue({
            el: '#product',
            data: {
                product: [],
                feedCount:0,
                banner:''
            },
            created:function () {   //实例初始化创建完成执行

                this.ProductDetail();     //调用自身方法
                this.feedbackCount();
                this.getCartNum();

            },
            methods:{              //定义封装方法
                //获取列表
                ProductDetail:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/product/getProductDetail.html",
                        dataType:"JSON",
                        data:{
                            id:'${id!}',
                            goodsClass:'${goodsClass!}'
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.product = d;
                                self.banner = d.imageList[0].imgAlbum;
                                var slider = mui("#slider");
                                slider.slider({
                                    interval: 1000
                                });
                                window.setTimeout(function () {
                                    $(".mui-indicator").eq(0).addClass("mui-active");
                                },200);

                            } else {

                            }
                        }
                    });

                },
                //获取购物车数量
                getCartNum:function () {
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/cart/getCartNum.html",
                        dataType:"JSON",
                        data:{

                        },
                        success:function(data){
                            if (data.code == 0) {
                                $("#cartNum").html(data.msg)
                            } else {
                                $("#cartNum").hide();
                            }
                        }
                    });

                },
                feedbackCount:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/feedback/feedbackCount",
                        dataType:"JSON",
                        data:{
                            goodsId:'${id!}'
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.feedCount =d;
                            } else {

                            }
                        }
                    });
                },
                look:function () {
                    window.location.href="${base!}/open/h5/feedback/goProductFeedback?goodsId=${id!}"
                }
            },
            watch:{     //监听器
                // carModel:function () {
                //     this.getProvince();
                // }
            }

        });
        function fastBuy() {
            var num = $("#productNum").html()*1;
            var array = [];
            var pdata = {};
            pdata.num = num+"";
            var pNum = $("#stock").val();
            if(num*1>pNum*1){
                layer.open({
                    content: "库存不足!"
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return;
            }
            pdata.productId = '${id!}';
            array[0]=pdata;
            window.location.href="${base!}/open/h5/order/orderConfirmation.html?productList="+encodeURIComponent(JSON.stringify(array));
        }
        //添加购物车
        function addCart() {
            var productNum = $("#productNum").html()*1;
            if(productNum==null||productNum==undefined||productNum==""){
                productNum=1;
            }
            var pNum = $("#stock").val();
            if(productNum*1>pNum*1){
                layer.open({
                    content: "库存不足!"
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return;
            }
            $.ajax({
                type:"POST",
                url:"${base!}/open/h5/cart/addCart.html",
                dataType:"JSON",
                data:{
                    productId:'${id!}',
                    num:productNum
                },
                success:function(data){
                    if (data.code == 0) {
                        var oNum=$("#cartNum").html()*1;
                        $("#cartNum").html(oNum+productNum);
                        layer.open({
                            content: "添加成功!"
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });

                    } else if(data.code == -1){

                        layer.open({
                            content: '您没有登录，请登录！'
                            ,btn: '去登录',
                            end:function(){
                                window.location.href="${base!}/open/H5/login/login.html"
                            }
                        });
                    }else {
                        layer.open({
                            content: "商品不存在!"
                            ,skin: 'msg'
                            ,time: 1 //2秒后自动关闭
                        });
                    }
                }
            });
        }
    function addPro() {
        var num = $("#productNum").html()*1;
        var pNum = $("#stock").val();
        if(num>pNum*1){
            layer.open({
                content: "库存不足!"
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return;
        }
        if(num==1){
            $(".reduce").removeClass("nofocus");
        }
        $("#productNum").html(num+1);

    }
    function reducePro() {
        var num = $("#productNum").html()*1;
        if(num==2){
            $(".reduce").addClass("nofocus");
        }
        if(num==1){
            layer.open({
                content: "最小数量为1!"
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return;
        }

        $("#productNum").html(num-1);
    }
</script>
        </body>
</html>